<template>
  <div>
    <el-dialog :title="dialogTitle === 1 ? '新增' : '修改'" :visible.sync="show" width="800px"
      :close-on-press-escape="false" destroy-on-close :close-on-click-modal="false" :fullscreen="device == 'mobile'"
      @open="openHandler">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="90px" class="demo-form"
        :label-position="device == 'mobile' ? 'top' : 'right'">
        <el-row :gutter="20">
          <el-col :span="device == 'mobile' ? 24 : 12">
            <el-form-item label="工单类型" prop="type">
              <el-select v-model="form.type" clearable filterable placeholder="请选择工单类型" style="width: 100%;" @change="handleTypeChange">
                <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="device == 'mobile' ? 24 : 12">
            <el-form-item label="工单来源" prop="source">
              <el-radio-group v-model="form.source" @change="radioChange">
                <el-radio v-for="item in projectType" :key="item.value" :label="item.label">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="device == 'mobile' ? 24 : 12">
            <el-form-item label="客户" prop="clientId" :rules="[
              { required: true, message: '请选择客户', trigger: 'blur' }
            ]" v-if="form.source === '客户'">
              <el-select v-model="form.clientId" filterable clearable default-first-option placeholder="请选择客户"
                style="width: 100%" @change="changeCustomerHandler">
                <el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="代理商" prop="agentId" :rules="[
              { required: true, message: '请选择代理商', trigger: 'blur' }
            ]" v-if="form.source === '代理商'">
              <el-select v-model="form.agentId" filterable clearable default-first-option placeholder="请选择代理商"
                style="width: 100%" @change="changeAgentHandler">
                <el-option v-for="item in agentList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="device == 'mobile' ? 24 : 12">
            <el-form-item label="二级部门" prop="secondarySector" :rules="[
              { required: true, message: '请选择二级部门', trigger: 'blur' }
            ]" v-if="form.source === '客户'">
              <el-select v-model="form.facultyId" filterable clearable default-first-option placeholder="请选择二级部门"
                style="width: 100%" @change="changeSchoolHandler">
                <el-option v-for="item in schoolList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="二级部门" prop="secondarySector" v-if="form.source === '代理商'">
              <el-input v-model.trim="form.secondarySector" clearable :maxLength="30" placeholder="请输入二级部门" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="device === 'mobile' ? 24 : 12">
            <el-form-item label="联系人" prop="contactName">
              <el-select v-model="form.contactName" filterable clearable default-first-option placeholder="请选择联系人"
                style="width: 100%" @change="changeContactHandler">
                <el-option v-for="item in contactList" :key="item.id" :label="item.name" :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="device === 'mobile' ? 24 : 12">
            <el-form-item label="联系电话" prop="contactPhone">
              <el-input v-model.trim="form.contactPhone" clearable :maxLength="20" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="device === 'mobile' ? 24 : 12">
            <el-form-item label="产品名称" :prop="form.type !== '培训大赛' ? 'product' : ''">
              <el-select v-model="form.product" multiple clearable filterable placeholder="请选择产品" style="width: 100%;">
                <el-option v-for="item in productList" :key="item.id" :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="device === 'mobile' ? 24 : 12">
            <el-form-item label="计划时间" prop="planTime">
              <el-date-picker v-model="form.planTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择计划时间" style="width: 100%;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="device === 'mobile' ? 24 : 12">
            <el-form-item label="项目编号" :prop="form.type !== '培训大赛' ? 'projectNo' : ''">
              <el-select v-model="form.projectNo" allow-create clearable filterable placeholder="请选择项目" style="width: 100%;">
                <el-option v-for="item in projectList" :key="item.id"
                           :value="item.projectNo">
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.projectNo }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="device === 'mobile' ? 24 : 12">
<!--            <el-form-item label="项目名称" prop="projectName">-->
<!--              <el-input v-model="form.projectName" :maxlength="50" readonly></el-input>-->
<!--            </el-form-item>-->
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="device === 'mobile' ? 24 : 12">
            <el-form-item label="服务内容" prop="serviceContent">
              <el-select v-model="form.serviceContent" clearable filterable placeholder="请选择服务内容" style="width: 100%;">
                <el-option v-for="item in serviceList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="device === 'mobile' ? 24 : 12">
            <el-form-item label="描述" prop="description">
              <el-input v-model.trim="form.description" placeholder="请输入描述" :maxLength="100" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="device === 'mobile' ? 24 : 12">
            <el-form-item label="地址" prop="address">
              <el-input v-model.trim="form.address" type="textarea" placeholder="请输入地址" :maxLength="500"
                :autosize="{ minRows: 2 }" />
            </el-form-item>
          </el-col>
          <el-col :span="device === 'mobile' ? 24 : 12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model.trim="form.remark" type="textarea" placeholder="请输入备注" :maxLength="500"
                :autosize="{ minRows: 2 }" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-form-item label="附件">
          <el-upload class="upload-demo" ref="upload" action="#" multiple :limit="9" :on-change="handleChange"
            :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="submitForm('formRef')">仅保存</el-button>
        <el-button type="primary" v-hasPermi="['after:workorder:assign']" @click="submitSell('formRef')">保存并派发</el-button>
        <el-button @click="cancal">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="执行人" :visible.sync="userVisible" width="800px" :close-on-press-escape="false" destroy-on-close
      close-on-click-modal :fullscreen="device === 'mobile'">
      <el-form :model="form" :rules="rules" ref="formRef2" label-width="90px" class="demo-form"
        :label-position="device === 'mobile' ? 'top' : 'right'">
        <el-row :gutter="20">
          <el-col :span="device === 'mobile' ? 24 : 12">
            <el-form-item label="负责人" prop="principalId">
              <el-select v-model="form.principalId" allow-create clearable filterable placeholder="请选择负责人"
                style="width: 100%;">
                <el-option v-for="item in userList" :key="item.userId" :label="item.userName" :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="device === 'mobile' ? 24 : 12">
            <el-form-item label="协同人" prop="synergyIds">
              <el-select v-model="form.synergyIds" multiple allow-create clearable filterable placeholder="请选择协同人"
                style="width: 100%;">
                <el-option v-for="item in userList" :key="item.userId" :label="item.userName" :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="sellForm('formRef2')">下一步</el-button>
        <el-button @click="cancal">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addDataApi, updateDataApi } from "@/api/after/workorder";
import { getDataListApi as getAllCustomerListApi } from "@/api/crm/md/customer";
import { getDataListApi as getAllSchoolListApi } from "@/api/crm/md/school";
import { getDataListApi as getAllAgentListApi } from "@/api/crm/md/agent";
import { getDataListApi as getAllContactListApi } from "@/api/crm/md/contacts";
import { getDataListApi as getAllProductApi } from "@/api/crm/md/school/product";
import { getUserProfile, listUser } from "@/api/system/user";
import { mapGetters } from 'vuex'
import {
  getDataListApi
} from "@/api/crm/md/project";

export default {
  name: "CreateAfterOrder",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      required: true
    },
    add: {
      type: Function,
      default: () => { }
    },
    update: {
      type: Function,
      default: () => { }
    },
    dialogTitle: {
      type: Number,
      default: 1
    },
  },
  watch: {
    info: {
      deep: true,
      handler(newV) {
        this.form = { ...newV }
        if(newV.facultyId){
          this.formatData(newV)
        } else if(newV.agentId) {
          this.formatData2(newV)
        }
      },
    }
  },
  data() {
    return {
      userVisible: false, // 执行人选择框
      imgDialogUrl: "",// 预览图链接
      env: process.env.VUE_APP_STATIC_API || '',
      imgDialogVisible: false, // 预览图片的弹框
      // 加载动画
      loading: true,
      pickerOptions: {
        disabledDate(time) {
          // 禁止选择今天及今天之后的日期
          return time.getTime() > Date.now();
        }
      },
      // 新增和修改参数
      form: {
        menuType: 1,
        projectNo: null,
        projectName: "", // 项目名称
        secondarySector: "", // 二级部门
        id: null,
        workorderId: null,
        type: "售后维修", // 工单类型（调试验收、售后走访、现场维修、培训大赛）
        source: "客户", // source工单来源（客户、合作伙伴）
        name: "", // 客户/合作伙伴 名称
        contactName: "", // 联系人名称
        contactPhone: "",
        contactId: null,
        address: "", // 地址
        planTime: "", // 计划时间
        serviceContent: "安装", // 服务内容 安装、维修、走访、培训、大赛
        product: [], // 产品
        image: "",
        remark: "",
        finishTime: "", // 完成时间
        principalId: "", // 负责人ID
        synergyId: "", // 协同人ID
        synergyIds: [], // 协同人ID
        principalName: "", // 负责人名称
        synergyName: "", // 协同人名称
        description: "", // 描述
        status: "待分配", // 工单状态：（待分配、已指派、已接受、进行中、已完成、已暂停）
      },
      serviceList: [
        {
          value: "安装",
          label: "安装",
        },
        {
          value: "维修",
          label: "维修",
        },
        {
          value: "走访",
          label: "走访",
        },
        {
          value: "培训",
          label: "培训",
        },
        {
          value: "大赛",
          label: "大赛",
        },
        {
          value: "其他",
          label: "其他",
        }
      ],
      // 表单的校验规则
      rules: {
        projectNo: [
          { required: true, message: '请选择项目', trigger: 'change' }
        ],
        principalId: [
          { required: true, message: '请选择负责人', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择工单类型', trigger: 'change' }
        ],
        source: [
          { required: true, message: '请选择工单来源', trigger: 'change' }
        ],
        contactName: [
          { required: true, message: '请选择联系人', trigger: 'change' }
        ],
        serviceContent: [
          { required: true, message: '请输入服务内容', trigger: 'blur' }
        ],
        planTime: [
          { required: true, message: '请选择计划时间', trigger: 'change' }
        ],
        product: [
          { required: true, message: '请选择产品', trigger: 'change' }
        ],
        contactPhone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        // facultyId: [
        //   { required: true, message: '请选择二级部门', trigger: 'change' }
        // ],
        // clientId: [
        //   { required: true, message: '请选择客户', trigger: 'change' }
        // ],
        // agentId: [
        //   { required: true, message: '请选择代理商', trigger: 'change' }
        // ],
      },
      // 表格数据
      tableData: [],
      // 总数条数
      total: 0,
      // 查询参数
      queryParams: {
        clientName: "", // 创建人 *
        type: null, // 类型 *
        pageNum: 1,
        pageSize: 10,
      },
      // 类型
      typeList: [
        {
          label: "调试验收",
          value: "调试验收"
        },
        {
          label: "售后走访",
          value: "售后走访"
        },
        {
          label: "现场维修",
          value: "现场维修"
        },
        {
          label: "培训大赛",
          value: "培训大赛"
        }
      ],
      // 工单来源类型
      projectType: [
        {
          value: "客户",
          label: "客户"
        },
        {
          value: "代理商",
          label: "代理商"
        }
      ],
      // 代理商数据
      agentList: [],
      // 客户数据
      customerList: [],
      // 二级部门数据
      schoolList: [],
      // 联系人数据
      contactList: [],
      // 图片列表
      fileList: [],
      // 产品列表
      productList: [],
      // 用户列表
      userList: [],
      // 用户信息
      user: {},
      roleGroup: {},
      postGroup: {},
      projectList: [], // 项目列表
    }
  },
  computed: {
    ...mapGetters([
      'device'
    ])
  },
  created() {
    this.getUserinfo()
    this.getAllCustomerList()
    this.getAllAgentList()
    // this.getAllProduct()
    this.getUserList()
    // this.getAllProject()
  },
  methods: {
    // 改变工单类型 清除校验
    handleTypeChange() {
      this.$nextTick(()=>{
        this.$refs.formRef.clearValidate();
      })
    },
    // 改变项目编号
    // changeProject(value) {
    //   let str = ""
    //
    //   if(!value) {
    //     this.form.projectName = str
    //     return false
    //   }
    //
    //   const list = this.projectList
    //
    //   for (let i = 0; i < list.length; i++) {
    //     const ele = list[i]
    //     if(ele.projectNo === value) {
    //       str = ele.name
    //       break
    //     }
    //   }
    //
    //   this.form.projectName = str
    // },
    // 回显代理商信息
    formatData2(newV){
      this.getAllProject({ facultyId: null, agentId: newV.agentId })
    },
    // 获取项目信息
    async getAllProject(payload) {
      const res = await getDataListApi(payload)
      if(res.code === 200) {
        this.projectList = res.rows ?? []
      }
    },
    // 回显客户信息
    async formatData(newV) {
      const result = this.isTrueDate(newV.clientId, 'id', this.customerList)
      await this.getAllSchoolList(result.name)

      await this.getAllContactList(newV.facultyId)

      this.getAllProduct(newV.facultyId)
      this.getAllProject({ facultyId: newV.facultyId, agentId: null })
    },
    // 完成派发
    sellForm(formName) {
      const _this = this
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // let status = ''
          // if(this.form.status === '进行中') {
          //   status = '进行中'
          // } else {
          //   status = '已指派'
          // }

          const payload = {
            ..._this.form,
            status: "已指派",
            // status,
            product: _this.form.product.join(','),
            updateBy: _this.user.nickName,
          }
          const res = await updateDataApi(payload)
          if (res.code === 200) {
            _this.$message({
              message: res.msg,
              type: 'success'
            });

            // 调用添加的回调，配合服务事件的关联工单功能使用
            this.$emit('add', { ...res, data: _this.form.id, flag: true })
            _this.$emit('update:show', false)

            // 跳转到工单详情页
            this.userVisible = false
          } else {
            _this.$message({
              message: res.msg,
              type: 'error'
            });
          }
        }
      })
    },
    // 保存并派发
    submitSell(formName) {
      const _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const payload = {
            ..._this.form,
            product: _this.form.product.join(','),
            updateBy: _this.user.nickName,
          }

          if (this.dialogTitle === 1) {
            payload.createBy = _this.user.nickName
            payload.userId = _this.user.userId

            addDataApi(payload).then((res) => {
              if (res.code === 200) {
                _this.form.id = res.data
                _this.userVisible = true
                // _this.$message({
                //   message: res.msg,
                //   type: 'success'
                // });
                // this.$emit('add', res)
                // this.$emit('update:show', false)
              } else {
                _this.$message({
                  message: res.msg,
                  type: 'error'
                });
              }
            })
          } else {
            updateDataApi(payload).then((res) => {
              if (res.code === 200) {
                // _this.$message({
                //   message: res.msg,
                //   type: 'success'
                // });
                _this.userVisible = true
                // this.$emit('update', res)
                // this.$emit('update:show', false)
              } else {
                _this.$message({
                  message: res.msg,
                  type: 'error'
                });
              }
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 获取用户列表
    getUserList() {
      listUser({
        pageSize: 500,
      }).then(response => {
        this.userList = (response.rows ?? []).filter(i => !i.admin)
      }
      );
    },
    // 改变联系人的回调
    // 根据联系人姓名 在联系人信息表中查询 找到职务、手机号
    changeContactHandler(val) {
      let result = null
      this.contactList.map((item) => {
        if (item.name === val) result = { ...item }
      })

      if (result) {
        this.form.contactJob = result.job
        this.form.contactPhone = result.phone
      }
    },
    // 遍历list中的属性per是否与value相同，返回相同的数据项
    isTrueDate(value = "", per = "", list = []) {
      let result = {}
      list.map((item) => {
        if (typeof item[per] === 'number') {
          if (item[per] === value) {
            result = item
          }
        } else {
          if (item[per].localeCompare(value) === 0) {
            result = item
          }
        }
      })

      return result
    },
    // 改变客户的回调
    changeCustomerHandler(val) {
      this.form.projectNo = null
      this.form.facultyId = null
      this.form.secondarySector = ""
      this.form.product = ""
      this.productList = []
      this.schoolList = []
      this.projectList = []
      this.cleanContectInfo()
      const result = this.isTrueDate(val, 'id', this.customerList)
      // 修改地址
      this.form.address = result.address
      this.form.name = result.name
      this.getAllSchoolList(result.name)
    },
    // 清空联系人相关信息
    cleanContectInfo() {
      this.form.contactName = ""
      this.form.contactJob = ""
      this.form.contactPhone = ""
      this.form.contactId = null
      this.contactList = []
      this.$nextTick(() => {
        this.$refs['formRef'].clearValidate()
      })
    },
    // 弹窗打开的回调
    openHandler() {
      this.$nextTick(() => {
        this.$refs['formRef'].clearValidate()
      })
    },
    // 改变代理商的回调
    changeAgentHandler(val) {
      this.form.facultyName = ""
      this.cleanContectInfo()
      // 获取代理商的信息
      const result = this.isTrueDate(val, 'id', this.agentList)
      // 修改地址
      this.form.address = result.address
      this.form.name = result.name
      this.getAllContactList(result.id, 1)
      this.getAllProduct(val)
      this.getAllProject({ agentId: val, facultyId: null })
    },
    // 获取全部客户信息
    getAllCustomerList() {
      getAllCustomerListApi({ flag: true }).then((res) => {
        this.customerList = res.rows ?? []
      })
    },
    // 获取全部二级部门信息
    async getAllSchoolList(clientName) {
      if (!clientName) return false
      const res = await getAllSchoolListApi({ clientName })
      this.schoolList = res.rows ?? []
    },
    // 改变二级部门的回调
    changeSchoolHandler(val) {

      if (!val) return false

      this.cleanContectInfo()

      const result = this.isTrueDate(val, 'id', this.schoolList)

      this.form.secondarySector = result.name

      this.getAllContactList(val)

      this.getAllProduct(val)

      this.getAllProject({ agentId: null, facultyId: val })
    },
    // 获取全部联系人信息
    async getAllContactList(val, type = 0) {

      if (!val) return false

      let flag = { id: null }
      if(type) {
        flag = this.isTrueDate(val, 'id', this.agentList)
      } else {
        flag = this.isTrueDate(val, 'id', this.schoolList)
      }

      const payload = {
        clientAgentId: flag.id,
        type,
      }
      const res = await getAllContactListApi(payload)
      this.contactList = res.rows ?? []
    },
    // 获取全部代理商数据
    getAllAgentList() {
      getAllAgentListApi().then((res) => {
        this.agentList = res.rows ?? []
      })
    },
    // 切换工单来源
    radioChange() {
      this.form.product = []
      this.form.address = []
      this.form.projectNo = null
      this.form.agentId = null
      this.form.facultyId = null
      this.form.clientId = null
      this.form.name = ""
      this.form.secondarySector = ""
      this.form.contactName = null
      this.form.contactPhone = ""
      this.contactList = []
      this.schoolList = []
      this.projectList = []
      this.$nextTick(() => {
        this.$refs['formRef'].clearValidate();
      })
    },
    // 查看图片
    handlePictureCardPreview(url) {
      this.imgDialogUrl = this.env + url
      this.imgDialogVisible = true;
    },
    // 获取全部产品
    async getAllProduct(id) {
      const params = {}

      if(this.form.source === '客户') {
        params.facultyId = id
      } else {
        params.agentId = id
      }

      const res = await getAllProductApi(params)
      if (res.code === 200) {
        this.productList = res.data?.list?.rows ?? []
      }
    },
    // 上传全部图片
    // async uploadImg() {
    //   const urlList = (this.fileList ?? []).filter(i => !i.raw).map(i => i.url)
    //   const list = (this.fileList ?? []).filter(i => i.raw).map((item) => {
    //     const formData = new FormData()
    //     formData.append('file', item.raw)
    //     return uploadImgApi(formData)
    //   })

    //   const imgList = (await Promise.all(list) ?? []).map(item => item?.fileName ?? "") ?? []
    //   this.form.image = [...urlList, ...imgList].join(',')
    // },
    // 删除图片
    handleRemove(_, fileList) {
      this.fileList = fileList
    },
    // 选中图片
    handleChange(_, fileList) {
      this.fileList = fileList
    },
    // 获取根据list中的value返回label
    getListValue(data, list, value = 'value') {
      let label = ''
      list.map((item) => {
        if (+item[value] === +data) {
          label = item.label
        }
      })
      return label
    },
    // 获取用户信息
    getUserinfo() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
      });
    },
    // 表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.dialogTitle === 1) {
            this.addDataHandler()
          } else {
            this.updateDataHandler()
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 增加数据的回调
    async addDataHandler() {
      const payload = {
        ...this.form,
        product: this.form.product.join(','),
        createBy: this.user.nickName,
        updateBy: this.user.nickName,
        userId: this.user.userId,
      }
      const res = await addDataApi(payload)
      if (res.code === 200) {
        this.$message({
          message: res.msg,
          type: 'success'
        });
        this.$emit('add', res)
        this.$emit('update:show', false)
      } else {
        this.$message({
          message: res.msg,
          type: 'error'
        });
      }
    },
    // 修改数据的回调
    async updateDataHandler() {
      const payload = {
        ...this.form,
        product: this.form.product.join(','),
        updateBy: this.user.nickName,
      }
      const res = await updateDataApi(payload)
      if (res.code === 200) {
        this.$message({
          message: res.msg,
          type: 'success'
        });
        this.$emit('update', res)
        this.$emit('update:show', false)
      } else {
        this.$message({
          message: res.msg,
          type: 'error'
        });
      }
    },
    // 取消弹框
    cancal() {
      this.userVisible = false
      this.$emit('update:show', false)
    },
  },
}
</script>

<style lang="scss" scoped>
.oneLine {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
